
<template>
    <div :id="props.id" :ref="setItemRef" class="echarts-container" :style="{ width: getFontSize(220) + 'px', height: getFontSize(160)  + 'px' }"></div>
</template>
<script setup lang="ts" name="eachchartsOEE">

import { ref, inject, onBeforeUnmount, defineProps } from 'vue';
const props = defineProps({
     value: {
        type: Number,
        default: 0
    }, id: {
        type: String,
        default: 0
    }
})
// 获取echart挂载的DOM节点
const container = ref();

// 赋值动态ref到变量
const setItemRef = (el: any) => {
    if (el) {
        container.value = el
    }
}
// 定义延时器指针对象，便于组件实例销毁的时候以便清除
const timer = ref();

// 通过 inject 接收Echarts
const Echarts = inject('$echarts');
const getFontSize: any = inject('$getfontSize');

// 或
// 通过Vue全局注册方式获取
// const {proxy}: any = getCurrentInstance();


const initEchartsOneFn = () => {
    // echarts初始化
    const myChart = (Echarts as any).init(container.value);

    // 或
    // let myChart = proxy.$echarts.init(container.value);

    const option = {
        series: [
            {
                type: "gauge",
                center: ["50%", "65%"], // 定位
                radius: "90%",
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 10,
                interval: 5,
                axisLine: {
                    show: true,
                    
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: getFontSize(10),
                        color: [ //表盘颜色

                            [0.5, "#DA462C"],//0-50%处的颜色
                            [0.8, "#FFED44"],//51%-80%处的颜色
                            [1, "#20AE51"]//81%-100%处的颜色
                        ],
                        opacity: 1
                    }
                },
                pointer: { //指针样式
                    length: '75%',
                    itemStyle: {
                        color: 'auto'
                    }
                },
                splitLine: { //分割线样式（及10、20等长线样式）
                    show: false,
                    length: getFontSize(10),
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 2,
                        color: 'auto',
                    }
                },
                axisTick: { //刻度线样式（及短线样式）
                    show: false,
                    length: getFontSize(10),
                    lineStyle: {
                        color: 'auto',
                    }
                },
                axisLabel: { //文字样式（及“10”、“20”等文字样式）
                    distance: getFontSize(1),//文字离表盘的距离
                    fontSize: getFontSize(10),
                    formatter: function (value: number) {
                        if (value == 0 || value == 50 || value == 80 || value == 100) {
                            return value
                        } else {
                            return ''
                        }
                    },
                    color: "#FFF"
                },
                detail: {
                    valueAnimation: true,
                    formatter: "{score|{value}%}",
                    offsetCenter: [0, "53%"],
                    height: 30,
                    rich: {
                        score: {
                            fontFamily: "微软雅黑",
                            fontSize: getFontSize(26),
                            color: 'inherit'
                        }
                    },
                },
                progress: {
                    width: 15
                },
                data: [{
                    value: props.value,
                    label: {
                        textStyle: {
                            fontSize: getFontSize(20)
                        }
                    }
                }]
            }
        ]
    };

    myChart.setOption(option);

    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 判断定时器是否存在
if (timer.value) {
    clearTimeout(timer.value);
}

// 绑定定时器，销毁的时候再次清除
timer.value = setTimeout(() => initEchartsOneFn(), 1000);

// 组件实例销毁前清除延时器对象
onBeforeUnmount(() => {
    if (timer.value) clearTimeout(timer.value);
});
</script>

<style scoped >
.chart {
    margin: 0 auto;
}

.chart {
    width: 100%;
    height: 100%;
    margin: 0;
}
</style>